<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻资讯</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <!--  -->
    <div class="w-full flex flex-col items-center">
        <!--  导航菜单 -->
        <header class="flex flex-row gap-4 py-2">
            <div>
                <!-- logo -->
                <img src="/images/logo.png">
            </div>
            <nav class="flex-1">
                <ul
                    class="flex flex-row justify-center font-bold [&>li]:h-[65px] [&>li]:p-4 [&>li]:hover:text-[#d9eb60] [&>li]:cursor-pointer gap-4">
                    <li>
                        <a href="./index.html">首页</a>
                    </li>
                    <li>
                        <a href="#">导师阵容</a>
                    </li>
                    <li>
                        <a href="./ranking.html">排名展示</a>
                    </li>
                    <li>
                        <a href="#">动态加权池</a>
                    </li>
                    <li>
                        <a href="#">授业解惑</a>
                    </li>
                    <li>
                        <a href="#">互动中心</a>
                    </li>
                    <li>
                        <a href="./student.html">学员介绍</a>
                    </li>
                    <li>
                        <a href="./news.html">新闻资讯</a>
                    </li>
                    <li>
                        <a href="#">关于我们</a>
                    </li>
                </ul>
            </nav>
        </header>


        <div class="w-full flex flex-col items-center bg-white">
            <header class="w-full flex flex-row justify-center items-center bg-[#d9eb60] gap-8 py-4">
                <div
                    class="flex flex-col items-center text-[#3f4c63] px-8 cursor-pointer [&.selected]:text-black border-r-2 border-black selected">
                    <h3 class="text-xl">最新赛况</h3>
                    <span>Latest Competition Upddates</span>
                </div>
                <div
                    class="flex flex-col items-center text-[#3f4c63] px-8 cursor-pointer border-r-2 border-black [&.selected]:text-black">
                    <h3 class="text-xl">热点速报</h3>
                    <span>Hot News Flash</span>
                </div>
                <div class="flex flex-col items-center text-[#3f4c63] px-8 cursor-pointer [&.selected]:text-black">
                    <h3 class="text-xl">高光回顾</h3>
                    <span>Event Highlights</span>
                </div>
            </header>
            <div class="w-[1200px] flex flex-col gap-6 text-black">
                <div class="flex flex-row gap-8 border-b py-8 border-[#cfd4da]">
                    <div class="w-1/4">
                        <img src="/images/news/news_img.png" alt="">
                    </div>
                    <div class="w-3/4">
                        <h3 class="text-xl">这里是文章标题这里是文章标题这里是文章标题这里是文章标题</h3>
                        <span class="text-sm text-[#cfd4da]">2023-08-15 10:00:00</span>
                        <div class="w-[50px] border-b border-[#cfd4da] py-2 mb-2"></div>
                        <span class="my-2 text-sm">
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                        </span>
                        <div
                            class="w-[200px] border border-[#8e8e8e] text-[#8e8e8e] px-4 py-2 text-center mt-4 hover:bg-[#d9eb60] hover:text-black">
                            查看更多>>
                        </div>
                    </div>
                </div>

                <div class="flex flex-row gap-8 border-b py-8 border-[#cfd4da]">
                    <div class="w-1/4">
                        <img src="/images/news/news_img.png" alt="">
                    </div>
                    <div class="w-3/4">
                        <h3 class="text-xl">这里是文章标题这里是文章标题这里是文章标题这里是文章标题</h3>
                        <span class="text-sm text-[#cfd4da]">2023-08-15 10:00:00</span>
                        <div class="w-[50px] border-b border-[#cfd4da] py-2 mb-2"></div>
                        <span class="my-2 text-sm">
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                        </span>
                        <div
                            class="w-[200px] border border-[#8e8e8e] text-[#8e8e8e] px-4 py-2 text-center mt-4 hover:bg-[#d9eb60] hover:text-black">
                            查看更多>>
                        </div>
                    </div>
                </div>
                <div class="flex flex-row gap-8 border-b py-8 border-[#cfd4da]">
                    <div class="w-1/4">
                        <img src="/images/news/news_img.png" alt="">
                    </div>
                    <div class="w-3/4">
                        <h3 class="text-xl">这里是文章标题这里是文章标题这里是文章标题这里是文章标题</h3>
                        <span class="text-sm text-[#cfd4da]">2023-08-15 10:00:00</span>
                        <div class="w-[50px] border-b border-[#cfd4da] py-2 mb-2"></div>
                        <span class="my-2 text-sm">
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                        </span>
                        <div
                            class="w-[200px] border border-[#8e8e8e] text-[#8e8e8e] px-4 py-2 text-center mt-4 hover:bg-[#d9eb60] hover:text-black">
                            查看更多>>
                        </div>
                    </div>
                </div>
                <div class="flex flex-row gap-8 border-b py-8 border-[#cfd4da]">
                    <div class="w-1/4">
                        <img src="/images/news/news_img.png" alt="">
                    </div>
                    <div class="w-3/4">
                        <h3 class="text-xl">这里是文章标题这里是文章标题这里是文章标题这里是文章标题</h3>
                        <span class="text-sm text-[#cfd4da]">2023-08-15 10:00:00</span>
                        <div class="w-[50px] border-b border-[#cfd4da] py-2 mb-2"></div>
                        <span class="my-2 text-sm">
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                            这里是文章内容，
                        </span>
                        <div
                            class="w-[200px] border border-[#8e8e8e] text-[#8e8e8e] px-4 py-2 text-center mt-4 hover:bg-[#d9eb60] hover:text-black">
                            查看更多>>
                        </div>
                    </div>
                </div>
                
                <!-- 分页 -->
                <ul class="flex flex-row justify-center gap-4 mb-30 [&>li]:border [&>li]:border-[#cfd4da] [&>li]:px-4 [&>li]:py-2 [&>li]:text-[#cfd4da] [&>li]:cursor-pointer
                    [&>li]:hover:bg-[#d9eb60] [&>li]:hover:text-black 
                    [&>li.selected]:bg-[#d9eb60] [&>li.selected]:text-black

                    ">
                    <li>
                        &lt;
                    </li>
                    <li class="selected">
                        1
                    </li>
                    <li>
                        2
                    </li>
                    <li>
                        3
                    </li>
                    <li>
                        4
                    </li>
                    <li>
                        5
                    </li>
                    <li>
                        6
                    </li>
                    <li>
                        7
                    </li>
                    <li>
                        8
                    </li>
                    <li>
                        9
                    </li>
                    <li>
                        &gt;
                    </li>
                </ul>
            </div>
        </div>

        <footer>
            <div class="w-[1200px] grid grid-cols-5 gap-4 px-12 py-16">
                <ul class="[&>li]:py-2">
                    <li class="text-xl font-bold">
                        关于我们
                    </li>
                    <li>
                        主办方：梧桐财经
                    </li>
                    <li>
                        首席赞助商
                    </li>
                    <li>
                        <img src="/images/logo.png">
                    </li>
                </ul>

                <ul class="[&>li]:py-2">
                    <li class="text-xl font-bold">
                        导师团队
                    </li>
                    <li>
                        邵悦华
                    </li>
                    <li>
                        章维军
                    </li>
                    <li>
                        张聚贤
                    </li>
                    <li>
                        崔荣
                    </li>
                </ul>

                <ul class=" [&>li]:py-2">
                    <li class=" text-xl font-bold">
                        加入我们
                    </li>
                    <li>
                        <a href="#">我要开户</a>
                    </li>
                    <li>
                        <a href="#">我要报名</a>
                    </li>
                </ul>

                <div>
                    <img src="/images/index/erweima.png" alt="">
                    <span>公众号二维码</span>
                </div>
                <div>
                    <img src="/images/index/erweima.png" alt="">
                    <span>公众号二维码</span>
                </div>
            </div>
        </footer>
    </div>
</body>

</html>